<template>
  <div class="headerWrapper">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
      <el-menu-item class="headerLogo" index="0" disabled>
        <a href="/">
          <img class="logo" :src="logoUrl" />
        </a>
      </el-menu-item>
      <el-menu-item
        class="headerItem"
        index="1"
        v-show="isLogin"
        :route="{ name: 'File', query: { filepath: '/', filetype: 0 } }"
      >网盘</el-menu-item>
      <el-submenu index="2" class="headerItem userDisplay right-menu-item" v-show="isLogin">
        <template slot="title">
          <el-avatar :size="34" :src="userImgUrl" fit="cover">
            <img :src="userImgDefault" />
          </el-avatar>
          <span class="username-header" v-if="nickname == ''">还没设置昵称呢</span>
          <span class="username-header" v-else>nickname</span>
        </template>
        <el-menu-item @click='exitButton()'><i class="el-icon-guide"></i>&nbsp;退出登录</el-menu-item>
        <el-menu-item @click='modifyUserInfo()'><i class="el-icon-edit"></i>&nbsp;修改信息</el-menu-item>
      </el-submenu>
      <!-- <el-menu-item class="headerItem userDisplay right-menu-item" index="2" v-show="isLogin">
        <el-avatar :size="34" :src="userImgUrl" fit="cover">
          <img :src="userImgDefault" />
        </el-avatar>
        <span class="username-header">{{ nickname ? nickname: '还没设置昵称呢' }}</span>
      </el-menu-item> -->
      <!-- <el-menu-item
        class="headerItem exit right-menu-item"
        v-show="isLogin"
        index="3"
        @click="exitButton()"
      >退出</el-menu-item> -->
      <el-menu-item
        class="headerItem login right-menu-item"
        v-show="!isLogin"
        index="4"
        :route="{ name: 'Login' }"
      >登录</el-menu-item>
      <el-menu-item
        class="headerItem register right-menu-item"
        v-show="!isLogin"
        index="5"
        :route="{ name: 'Register' }"
      >注册</el-menu-item>
    </el-menu>

    <el-dialog title="修改信息" :visible.sync="dialogVisible" width="600px" >
      <div style="width: 400px;">
        <el-form :model="formData" label-position="right" label-width="100px" size="mini" :rules="rules" ref="form">
        <el-form-item label="昵称">
          <el-input v-model="formData.nickname" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formData.password" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="formData.repassword" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            action="uploadUrl"
            ref="upload"
            name="img"
            drag 
            :with-credentials="true"
            limit="1"
            :data="upData"
            :file-list="fileList"
            :on-error="uploadFalse"
            :on-success="uploadSuccess"
            :auto-upload="false"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip" style="color:red">上传文件只能是jpg格式!</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpload(formData)">确定</el-button>
          <el-button   @click="onCancel(formData)">取消</el-button>
      </el-form-item>
      </el-form>
      </div>
      
    </el-dialog>
  </div>
</template>

<script>
import { logout } from '@/request/user.js'
import { mapGetters } from 'vuex'
import { BASE_URL } from '@/request/base.js'

export default {
  name: 'Header',
  data() {
    return {
      logoUrl: require('@/assets/images/common/logo_header.png'),
      userImgDefault: require('@/assets/images/settings/userImg.png'),
      dialogVisible: false,
      formData: {
        nickname: '',
        password: '',
        repassword: ''
      },
      fileList: [],
      rules: {
        nickname: [
          { min:3, max: 10, message: '昵称长度再3到10个字符', trigger: 'change'}
        ],
        password: [

        ],
        repassword: [],
      }
    }
  },
  computed: {
    ...mapGetters(['isLogin','userImgUrl','username','nickname']),
    activeIndex: {
      get() {
        let routerName = this.$route.name
        const ROUTERMAP = {
          File: '1',
          Login: '4',
          Register: '5'
        }
        return ROUTERMAP[routerName]
      },
      set() {
        return '1'
      }
    },
    upData: function(){
      return this.formData
    }
  },
  methods: {
    uploadUrl() {
      return BASE_URL + '/upload'
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    uploadSuccess(){

    },
    uploadFalse(){

    },
    submitUpload(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //触发组件的action
          this.$refs.upload.submit();
        } else {
          return false;
        }
      });
    },
    modifyUserInfo() {
      this.dialogVisible = true
    },
    //  退出登录
    exitButton() {
      logout().then(res => {
        if (res.code == 200) {
          this.$message.success('退出登录')
          sessionStorage.removeItem('isLogin')
          sessionStorage.removeItem('operaColumnExpand')
          sessionStorage.removeItem('isFolder')
          sessionStorage.removeItem('selectedColumnList')
          sessionStorage.removeItem('imageModel')
          this.$store.dispatch('clearAll')
          setTimeout(() => this.$router.push({path: '/login'}), 1000)
          // this.$store.dispatch('getUserInfo').then(() => {
          //   sessionStorage.removeItem('operaColumnExpand')
          //   sessionStorage.removeItem('isFolder')
          //   sessionStorage.removeItem('selectedColumnList')
          //   sessionStorage.removeItem('imageModel')
            // this.$router.push({ path: '/login' })
          // })
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.headerWrapper
  width 100%
  padding 25 20px
  box-shadow $tabBoxShadow
  >>> .el-menu--horizontal
    .el-menu-item:not(.is-disabled):hover
      border-bottom-color $Primary !important
      background $tabBackColor
  .el-menu-demo
    display flex
    position relative
    .headerLogo
      color $Primary
      font-size 60px
      opacity 1
      cursor default
      a
        display block
      .logo
        height 40px
        vertical-align baseline
    .right-menu-item
      position absolute
    .userDisplay
      right 30px
      width 180px
      .username-header
        margin-left 6px
        min-width 60px
        display inline-block
        text-align center
    .exit
      right 0
    .login
      right 70px
    .register
      right 0px
</style>
